import React, { useEffect, useState } from "react";
import axios from "axios";

export default function UseStateDemo() {

  const [count, setCount] = useState(3);

  function changeCount() {
    setCount(count+6);//把count的值改成：原来的值加上6。
  }

  const [list,setList] = useState([]);

  // useEffect相当于componentDidMount，componentDidUpdate。
  // useEffect的第二个参数是依赖（的状态）：
  //  1）、当依赖是空数组时，表示不依赖任何状态，既就是，任何状态发生变化，都不再执行useEffect的回调函数。此时，useEffect相当于componentDidMount。
  //  2)、当依赖写成[count] 时，表示当状态count发生变化时，才会调用useEffect的回调函数。此时，useEffect相当于componentDidMount和count引起的componentDidUpdate。
  //  3）、当依赖没有写（第二个参数没有写）。表示任何状态发生变化时，都会调用useEffect的回调函数，此时useEffect相当于componentDidMount和componentDidUpdate。

  useEffect(()=>{
    // console.log("useEffect的回调函数被调用了"); 
    axios({
      url:"http://118.178.238.19:3001/api/pro/categorylist"
      
    })
    .then(res=>{
      if(res.data.code==="200"){
        console.log("res.data.data",res.data.data);
        setList(res.data.data);
      }
    })
  },[count])

  return (
    <div>
      <h1>useEffect</h1>
      <p>count:{count}</p>
      <input type="button" value="修改count" onClick={changeCount} />
      <hr/>
      <ul>
        {list.map(item=>(
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}
